<template>
	<view class="flex-col page">
		<navbar></navbar>
		<view class="flex-col group_6">
			<view class="flex-col">
<!-- 				<view class="flex-col section_1">
					<view class="justify-between equal-division">
						<image
							src="http://images.wanjunshijie.com/product/cook/assets/3eea275778035121cb2bd5d7675540de.png"
							class="equal-division-item" />
						<image
							src="http://images.wanjunshijie.com/product/cook/assets/c99d4fea6a97cf0864db470bcf22b778.png"
							class="equal-division-item_1" />
						<image
							src="http://images.wanjunshijie.com/product/cook/assets/c892c1397ede40b4d3a5520522398a09.png"
							class="equal-division-item" />
					</view>
				</view> -->
				<view class="flex-col list">
					<u-list @scrolltolower="getmore">
						<u-list-item v-for="(item, index) in list" :key="index">
							<cookitem :item="item"></cookitem>
						</u-list-item>
					</u-list>
				</view>
			</view>
			<text class="text_61">没有更多啦</text>
		</view>
	</view>
</template>

<script>
	import navbar from '../../components/navbar.vue'
	import cookitem from '../../components/cookitem.vue'
	import {
		innercooklist
	} from '../../config/api.js'
	export default {
		components: {
			navbar,
			cookitem
		},
		data() {
			return {
				page: 1,
				list: []
			};
		},
		mounted() {
			this.getdata()
		},
		methods: {
			getdata() {
				var that = this;
				that.page = 1
				innercooklist({
					page: that.page
				}, {
					custom: {
						auth: true
					}
				}).then(res => {
					if (res.code == 1) {
						console.log(res.data)
						that.list = res.data
					}
				}).catch(err => {

				})
			},
			getmore() {
				var that = this;
				that.page = that.page + 1;
				innercooklist({
					page: that.page
				}, {
					custom: {
						auth: true
					}
				}).then(res => {
					if (res.code == 1) {
						console.log(res.data)
						var data = res.data;
						for (var i = 0; i < data.length; i++) {
							that.list.push(data[i]);
						}
					}
				}).catch(err => {

				})
			},
		}
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: rgb(242, 242, 242);
		width: 100%;
		height: 100%;
		overflow-y: auto;

		.group_6 {
			padding: 16rpx 23rpx 29rpx 24rpx;
			flex: 1 1 auto;
			overflow-y: auto;

			.text_61 {
				margin-top: 26rpx;
				align-self: center;
				color: rgb(172, 170, 170);
				font-size: 24rpx;
				line-height: 24rpx;
				white-space: nowrap;
			}

			.section_1 {
				padding: 21rpx 0 23rpx;
				background-color: rgb(255, 255, 255);
				border-radius: 10rpx;
				border: solid 2rpx rgb(238, 238, 238);

				.equal-division {
					margin-left: 18rpx;
					margin-right: 17rpx;

					.equal-division-item {
						width: 140rpx;
						height: 26rpx;
					}

					.equal-division-item_1 {
						width: 139rpx;
						height: 26rpx;
					}
				}
			}

			.list {
				padding-top: 17rpx;

				.list-item {
					background-color: rgb(255, 255, 255);
					border-radius: 10rpx;
					border: solid 2rpx rgb(238, 238, 238);

					&:not(:first-of-type) {
						margin-top: 14rpx;
					}

					.top-group {
						padding: 25rpx 13rpx 20rpx 22rpx;
						border-bottom: solid 2rpx rgb(242, 242, 242);

						.left-section {
							background-image: url('http://images.wanjunshijie.com/product/cook/assets/c3166af86a1830dfcc38e3d47894f26a.png');
							background-size: 100% 100%;
							background-repeat: no-repeat;
							width: 206rpx;
							height: 237rpx;

							.section_3 {
								height: 237rpx;
								border: solid 2rpx rgb(254, 209, 0);
							}
						}

						.center-group {
							margin-left: 37rpx;
							width: 250rpx;

							.top-group_1 {
								padding: 0 2rpx;

								.text_7 {
									color: rgb(0, 0, 0);
									font-size: 28rpx;
									line-height: 26rpx;
									white-space: nowrap;
								}

								.image_8 {
									margin: 7rpx 0 6rpx 10rpx;
									width: 12rpx;
									height: 14rpx;
								}

								.text_9 {
									margin-left: 8rpx;
									margin-top: 3rpx;
									color: rgb(249, 182, 2);
									font-size: 24rpx;
									line-height: 24rpx;
									white-space: nowrap;
								}

								.image_14 {
									margin: 8rpx 0 6rpx 10rpx;
								}

								.text_40 {
									margin-top: 4rpx;
								}

								.image_16 {
									margin: 8rpx 0 6rpx 10rpx;
								}

								.text_51 {
									margin-top: 4rpx;
								}
							}

							.center-group_1 {
								margin-top: 45rpx;
								color: rgb(140, 63, 0);
								font-size: 24rpx;
								line-height: 24rpx;
								white-space: nowrap;

								.top-group_2 {
									padding-bottom: 14rpx;

									.left-section_1 {
										background-color: rgba(249, 182, 2, 0.3);
										border-radius: 10rpx;
										width: 95rpx;
										height: 41rpx;
										position: relative;

										.section_4 {
											opacity: 0.5;
											border-radius: 10rpx;
											height: 41rpx;
											border: solid 2rpx rgb(249, 182, 2);
										}

										.text_11 {
											position: absolute;
											left: 24rpx;
											top: 50%;
											transform: translateY(-50%);
										}
									}

									.right-section {
										margin-left: 13rpx;
										background-color: rgba(249, 182, 2, 0.3);
										border-radius: 10rpx;
										width: 95rpx;
										height: 41rpx;
										position: relative;

										.section_5 {
											opacity: 0.5;
											border-radius: 10rpx;
											height: 41rpx;
											border: solid 2rpx rgb(249, 182, 2);
										}

										.text_13 {
											position: absolute;
											left: 25rpx;
											top: 50%;
											transform: translateY(-50%);
										}
									}
								}

								.bottom-section {
									background-color: rgba(249, 182, 2, 0.3);
									border-radius: 10rpx;
									width: 95rpx;
									position: relative;

									.section_6 {
										opacity: 0.5;
										border-radius: 10rpx;
										height: 41rpx;
										border: solid 2rpx rgb(249, 182, 2);
									}

									.text_15 {
										position: absolute;
										right: 1rpx;
										top: 50%;
										transform: translateY(-50%);
									}
								}
							}

							.text_17 {
								margin-top: 48rpx;
								color: rgb(172, 170, 170);
								font-size: 24rpx;
								line-height: 24rpx;
								white-space: nowrap;
							}

							.view_35 {
								margin-top: 44rpx;
							}

							.view_50 {
								margin-top: 44rpx;
							}
						}

						.right-group {
							margin-left: 80rpx;
							line-height: 24rpx;
							white-space: nowrap;
							height: 25rpx;

							.text_19 {
								color: rgb(255, 1, 1);
								font-size: 16rpx;
								line-height: 13rpx;
							}

							.text_21 {
								color: rgb(255, 1, 1);
								font-size: 30rpx;
								line-height: 23rpx;
							}

							.text_23 {
								color: rgb(255, 1, 1);
								font-size: 26rpx;
								line-height: 24rpx;
							}
						}

						.view_16 {
							background-image: url('http://images.wanjunshijie.com/product/cook/assets/bd0aa6e303c1eae23238ddf2058d65d1.png');
							margin-bottom: 3rpx;
						}

						.view_46 {
							background-image: url('http://images.wanjunshijie.com/product/cook/assets/160aaa8969f6f30a498d017f61ae203d.png');
							margin-bottom: 3rpx;
						}
					}

					.bottom-group {
						padding: 20rpx 13rpx 20rpx 21rpx;
						color: rgb(172, 170, 170);
						font-size: 24rpx;
						line-height: 24rpx;
						white-space: nowrap;

						.image_10 {
							width: 17rpx;
							height: 21rpx;
						}

						.text_25 {
							margin-left: 14rpx;
						}
					}

					.view_15 {
						padding: 27rpx 13rpx 18rpx 22rpx;
					}

					.view_45 {
						padding: 27rpx 13rpx 18rpx 22rpx;
					}
				}
			}
		}
	}
</style>
